<template>
  <div class="banxin goods">
    <!-- 面包屑 -->
    <p>首页 / 全部商品</p>
    <img src="../assets/images/products/banner.png" alt="" />
    <section class="list">
      <div>
        <b>排序 : </b>
        <span
          @click="pxclick(item.min, item.max, index)"
          :class="{ active: index == pxdj }"
          v-for="(item, index) in paixuArr"
          :key="index"
          >{{ item.txt }}</span
        >
      </div>
      <div>
        <b>分类 : </b>
        <span
          @click="flclick(item.value, index)"
          :class="{ active: index == fldj }"
          v-for="(item, index) in fenleiArr"
          :key="index"
          >{{ item.txt }}</span
        >
      </div>
    </section>
    <!-- <RecommendationList :data="goodsArr" /> -->
    <LoadMore :bigarr="goodsArr" :size="8">
      <RecommendationList slot-scope="scope" :arr="scope.smallarr" />
    </LoadMore>
  </div>
</template>

<script>
import RecommendationList from "@/components/home/RecommendationList.vue";
import { GetGoodsDataApi } from "@/request/api";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      // 排序的数组
      paixuArr: [
        { txt: "全部", min: 0, max: 0 },
        { txt: "我能兑换的" },
        { txt: "0-500分", min: 0, max: 500 },
        { txt: "500-1000分", min: 500, max: 1000 },
        { txt: "1000-1500分", min: 1000, max: 1500 },
        { txt: "1500-2500分", min: 1500, max: 2500 },
        { txt: "2500-5000", min: 2500, max: 5000 },
        { txt: "5000-100000", min: 5000, max: 100000 },
      ],
      //   分类的数组
      fenleiArr: [
        { txt: "全部", value: 0 },
        { txt: "实体商品", value: 1 },
        { txt: "虚拟商品", value: 2 },
      ],
      //   商品的数组
      goodsArr: [],
      pxdj: 0,
      fldj: 0,
    };
  },
  methods: {
    ...mapMutations({
      changeGoodsObj: "goods/changeGoodsObj",
    }),

    getGoodsDataFn() {
      GetGoodsDataApi(this.goodsObj).then((res) => {
        this.goodsArr = res.data.data;
      });
    },
    // 排序
    pxclick(min, max, index) {
      // 重新将地址栏清空      重写url地址
      window.history.replaceState(null, null, this.getURL());
      this.pxdj = index;
      // 加 keyword的作用是为了再搜索之后，重复点击可以实现正常功能，
      // 如果不加，搜索后可能出现 数据未重新请求的bug
      this.changeGoodsObj({ min, max, keyword: "" });
      this.getGoodsDataFn();
    },
    // 分类
    flclick(type, index) {
      window.history.replaceState(null, null, this.getURL());
      this.fldj = index;
      this.changeGoodsObj({ type, keyword: "" });
      this.getGoodsDataFn();
    },
    // 重写url地址
    getURL() {
      return window.location.href.substring(
        0,
        window.location.href.indexOf("?")
      );
    },
  },
  created() {
    if (this.$route.query.keyword) {
      this.changeGoodsObj({ keyword: this.$route.query.keyword });
    } else {
      this.changeGoodsObj({ keyword: "" });
    }
    this.getGoodsDataFn();
  },
  computed: {
    ...mapState({
      goodsObj: (state) => state.goods.goodsObj,
    }),
  },
  components: {
    RecommendationList,
  },
  watch: {
    $route: {
      handler(newVal, oldVal) {
        // 新值和旧值不一样就刷新页面
        if (newVal.query.keyword !== oldVal.query.keyword) {
          this.$router.go(0);
        }
      },
    },
    deep: true,
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

.goods {
  .list {
    padding: 40px 10px;
    div {
      margin-bottom: 32px;
      b {
        font-weight: bold;
        color: #000;
        margin-right: 10px;
        font-size: 18px;
      }
      span {
        font-size: 16px;
        color: #999;
        cursor: pointer;
        margin-right: 10px;
        &.active {
          color: @blue;
          font-weight: bold;
        }
      }
    }
  }
}
</style>